<template>
  <!--简答 -->
  <el-form
    ref="form"
    :model="form"
    :disabled="readonly"
    :rules="rules"
    label-width="220px"
    class="test-form"
  >
    <el-form-item label="题干" prop="stem">
      <el-input
        :maxlength="200"
        show-word-limit
        type="textarea"
        v-model.trim="form.stem"
        rows="4"
        class="textareaClass"
        placeholder="请输入题干"
      ></el-input>
    </el-form-item>
    <el-form-item label="答案：" prop="answer">
      <el-input
        :maxlength="200"
        show-word-limit
        type="textarea"
        v-model.trim="form.answer"
        rows="4"
        class="textareaClass"
        placeholder="请输入答案"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
const createModalForm = {
  stem: "",
  answer: "",
}
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  name: "SanyuanMmFrontIndex",
  data() {
    return {
      // 表单校验
      rules: {
        stem: [
          {
            required: true,
            message: "题干不能为空",
            trigger: ["blur", "change"],
          },
        ],
        answer: [
          {
            required: true,
            message: "答案不能为空",
            trigger: ["blur", "change"],
          },
        ],
      },
      form: Object.assign({}, createModalForm),
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.$emit("formData", newVal)
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    // 表单重置
    reset() {
      this.form = Object.assign({}, createModalForm)
    },
    // 取消按钮
    cancel() {
      this.operatorDialog = false
      this.batchDialog = false
    },
  },
}
</script>

<style lang="scss" scoped>
.batchPage {
  display: flex;
  flex: 1;
  flex-direction: row;
}
.test-form {
  .delete {
  }
}
</style>
